<template>
    <div style="width: 100%;">
        <el-form ref="form" :model="form" class="size-auto width-100" :rules="rules" :inline="true" size="medium" label-width="130px">
            <CardBox title="一、征管经费">
                <template slot="button"><div>合计： <span class="money">￥{{ collectionManagementFeeTotal }}</span></div></template>
                <el-row :gutter="24">
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="征管经费" prop="collectionManagementFee">
                            <el-input v-model.trim="form.collectionManagementFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="征费维修维护费" prop="maintenanceRepairFee">
                            <el-input v-model.trim="form.maintenanceRepairFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="服务区运营费用" prop="serviceAreaOperationFee">
                            <el-input v-model.trim="form.serviceAreaOperationFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </CardBox>
            <CardBox title="二、养护经费">
                <template slot="button"><div>合计： <span class="money">￥{{ maintFee }}</span></div></template>
                <el-row :gutter="24">
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="运营费用" prop="operatingFee">
                            <el-input v-model.trim="form.operatingFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="养护检测费用" prop="maintenanceInspectionFee">
                            <el-input v-model.trim="form.maintenanceInspectionFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="日常养护费用" prop="routineMaintenanceFee">
                            <el-input v-model.trim="form.routineMaintenanceFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="养护工程费用" prop="maintenanceEngineeringFee">
                            <el-input v-model.trim="form.maintenanceEngineeringFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :lg="8" :xl="6">
                        <el-form-item label="其他" prop="otherFee">
                            <el-input v-model.trim="form.otherFee" maxlength="15" clearable placeholder="输入金额">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </CardBox>
            <el-row :gutter="24">
                <el-col :lg="8" :xl="6">
                    <el-form-item label="三、公用经费" prop="publicFee">
                        <el-input v-model.trim="form.publicFee" maxlength="15" clearable placeholder="输入金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :lg="8" :xl="6">
                    <el-form-item label="四、人员经费" prop="personnelFee">
                        <el-input v-model.trim="form.personnelFee" maxlength="15" clearable placeholder="输入金额">
                            <template slot="append">元</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
import BigNumber from 'bignumber.js'
import { MaintenanceProjectConfigModel } from '@/models'
import { isNumber2 } from '@/utils/validate'

const validNum = (rule, value, callback) => {
    if (value && !isNumber2(value)) {
        callback(new Error('正数，且最多2位小数'))
    } else {
        callback()
    }
}
export default {
    name: 'FormCard',
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        type: {
            type: String,
            default: 'add'
        }
    },
    data() {
        return {
            form: {},
            rules: {
                collectionManagementFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                maintenanceRepairFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                serviceAreaOperationFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                operatingFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                maintenanceInspectionFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                routineMaintenanceFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                maintenanceEngineeringFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                otherFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
                publicFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    // { validator: validNum, trigger: ['change', 'blur'] }
                ],
                personnelFee: [
                    { required: true, message: '必填项', trigger: ['change', 'blur'] },
                    { validator: validNum, trigger: ['change', 'blur'] }
                ],
            },
            model: new MaintenanceProjectConfigModel(),
            projectList: [] 
        }
    },
    computed: {
        collectionManagementFeeTotal() {
            const {collectionManagementFee, maintenanceRepairFee, serviceAreaOperationFee} = this.form
            return Number(new BigNumber(collectionManagementFee || 0).plus(maintenanceRepairFee || 0).plus(serviceAreaOperationFee || 0))
        },
        maintFee() {
            const {operatingFee, maintenanceInspectionFee, routineMaintenanceFee, maintenanceEngineeringFee, otherFee} = this.form
            return Number(new BigNumber(operatingFee || 0).plus(maintenanceInspectionFee || 0).plus(routineMaintenanceFee || 0).plus(maintenanceEngineeringFee || 0).plus(otherFee || 0))
        }
    },
    watch: {
        data: {
            handler(val) {
                this.form = {...val}
            },
            deep: true
        }
    },
    created() {
    },
    methods: {
        handleValidate() {
            return new Promise((resolve) => {
                this.$refs['form'].validate(valida => {
                    resolve(valida)
                })
            })
        }
    },
}
</script>

<style lang="scss" scoped>
::v-deep {
    .el-input-group__append, .el-input-group__prepend {
        color: inherit;
    }
}

.el-form--inline.size-auto.width-100 {
    ::v-deep {
        // form的label-width：72px 根据实际label宽度修改
        .el-form-item__content {
            width: calc(100% - 130px);
        }
    }    
}
.margin-b-0 {
    margin-bottom: 0;
}
.add-box {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 24px;
    background: rgb(250, 250, 250);
    border: 1px solid #F5F7FA;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    &:hover {
        background: rgb(240, 240, 240);
    }
    i {
        color: #171725;
        font-style: normal;
    }
}
.money {
    color: #0062ff;
    font-size: 18px;
}
</style>
